import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router";
import { Button, Menu, Dropdown } from 'antd'

import { requestFullScreen, exitFullScreen, isFullscreenElement } from "../../utils/utils";

export default function RightContain(props) {
  const { setSwitchTheme } = props
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const logOut = () => {
    dispatch({ type: 'logOut' })
    navigate('/login')
    window.sessionStorage.removeItem(
      "token"
    );
  }

  const [fullScreen, setFullScreen] = useState(false);
  const [originResizeFunc, setOriginResizeFunc] = useState(null);

  useEffect(() => {
    // 监听 键盘ESC 退出全屏(可以使用屏幕大小监听，触发对应的事件)
    if (window.addEventListener) {
      window.addEventListener("resize", onEscCancelFull, false);
    } else {
      setOriginResizeFunc(window.onresize);
      window.onresize = onEscCancelFull;
    }
    // 销毁清除事件
    return () => {
      if (window.removeEventListener) {
        window.removeEventListener("resize", onEscCancelFull, false);
      } else {
        window.onresize = originResizeFunc;
      }
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
  function onEscCancelFull() {
    // 用于反显状态
    setFullScreen(isFullscreenElement());
  }
  // 切换全屏
  const [screenTitle, setScreenTitle] = useState('全屏')
  const switchTheScreen = () => {
    if (fullScreen) {
      exitFullScreen()
      setScreenTitle('全屏')
    } else {
      requestFullScreen(document.body)
      setScreenTitle('退出全屏')
    }
  }


  const menu = (
    <Menu
      items={[
        {
          key:1,
          label:(<div onClick={()=>setSwitchTheme('dark')}>dark</div>)
        },{
          key:2,
          label:(<div onClick={()=>setSwitchTheme('light')}>light</div>)
        },
      ]}
    />
  )

  return (
    <div>
      <Dropdown overlay={menu} placement="bottom" arrow>
        <Button>主题切换</Button>
      </Dropdown>
      <Button onClick={switchTheScreen}>{screenTitle}</Button>
      <Button type="primary" onClick={logOut}>退出登录</Button>




    </div>
  )
}


